<template>
  <div id="cate">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-button type="primary" @click="showAddDialog">添加分类</el-button>
        <el-row>
            <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true" border>
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted==false" style="color: rgb(32, 178, 170);"></i>
                    <i class="el-icon-error" v-else style="color:red"></i>
                </template>

                <template slot="order" slot-scope="scope">
                    <el-tag size="small" v-if="scope.row.cat_level==0">一级</el-tag>
                    <el-tag type="success" size="small" v-else-if="scope.row.cat_level==1">二级</el-tag>
                    <el-tag type="warning" size="small" v-else>三级</el-tag>
                </template>

                <template slot="opt" slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">删除</el-button>
                </template>

            </tree-table>

            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
            :page-sizes="[3, 5, 10, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination> 
        </el-row>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog
        title="添加分类"
        :visible.sync="addDialogVisible"
        @close="addCateDialogClose"
        width="50%">
        <!-- 表单区域 -->
        <el-form :model="addCateForm" ref="addCateFormRef" :rules="addCateFormRules" label-width="100px">
            <el-form-item label="分类名称:" prop="cat_name" >
                <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>

            <el-form-item label="父级分类:">
               <el-cascader
                v-model="selectedKeys"
                :options="parentCateList"
                :props="cascProp"
                clearable
                filterable
                @change="parentCateChange">
                </el-cascader>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 修改分类对话框 -->
    <el-dialog
        title="修改分类"
        :visible.sync="editDialogVisible"
        @close="editCateDialogClose"
        width="50%">
        <!-- 表单区域 -->
        <el-form :model="editCateForm" ref="editCateFormRef" :rules="editCateFormRules" label-width="100px">
            <el-form-item label="分类名称:" prop="cat_name" >
                <el-input v-model="editCateForm.cat_name"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editCate">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'cate',
  data() {
      return {
          catelist:[],
          queryInfo:{
              type:3,
              pagenum:1,
              pagesize:5
          },
          total:0,
          columns: [
            {label: '分类名称',prop: 'cat_name'},
            {label: '是否有效',type: 'template',template: 'isok'},
            {label: '排序',type: 'template',template: 'order'},
            {label: '操作',type: 'template',template: 'opt'}
          ],
          addDialogVisible:false,
          addCateForm:{cat_name:'',cat_pid:0,cat_level:0},
          parentCateList:[],
          cascProp:{
              value:'cat_id',
              label:'cat_name',
              children:'children',
              checkStrictly: true 
          },
          selectedKeys:[],
          addCateFormRules:{
            cat_name:[{ required: true, message: '请输入分类', trigger: 'blur' }]
          },
        //   编辑
        editDialogVisible:false,
          editCateForm:{
              cat_id:0,
              cat_name:''
          },
          editCateFormRules:{
            cat_name:[{ required: true, message: '请输入分类', trigger: 'blur' }]
          }
      }
  },
  created(){
      this.getGoodsCate()
  },
  methods:{
      async getGoodsCate(){
          const{data:res}=await this.$http.get('categories',{params:this.queryInfo})
          if(res.meta.status!=200){
              return this.$message.error(res.meta.msg)
          }
          this.total=res.data.total
          this.catelist=res.data.result
      },
      // pagesize改事件
        handleSizeChange(newsize){
            this.queryInfo.pagesize=newsize
            this.getGoodsCate()
        },
        // 页码值发生改变的事件
        handleCurrentChange(newpage){
            this.queryInfo.pagenum=newpage
            this.getGoodsCate()
        },
        async getParentCateList(){
            const {data:res}=await this.$http.get('categories',{params:{type:2}})
            if(res.meta.status!=200){
                return $message.error(res.meta.msg)
            }
            this.parentCateList=res.data
        },

        showAddDialog(){
            this.addDialogVisible=true
            this.getParentCateList()
        },
        addCateDialogClose(){
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys=[]
            this.addCateForm={}
        },
        parentCateChange(){
            if(this.selectedKeys.length>0){
                // 获取最后一个id作为当前要添加的父级id
                this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
                this.addCateForm.cat_level=this.selectedKeys.length
                return
            }else{
                this.addCateForm.cat_pid=0
                this.addCateForm.cat_level=0
            }
        },
        addCate(){
             this.$refs.addCateFormRef.validate(async valid=>{
                 const{data:res}=await this.$http.post('categories',this.addCateForm)
                 if(res.meta.status!=201){
                     return this.$message.error(res.meta.msg)
                 }
                 this.$message.success(res.meta.msg)
                 this.getGoodsCate()
                 this.addDialogVisible=false
             })
        },
        showEditCateDialog(row){
            this.editCateForm.cat_id=row.cat_id
            this.editCateForm.cat_name=row.cat_name
            this.editDialogVisible=true
        },
        editCateDialogClose(){
            this.editCateForm={}
             this.$refs.editCateFormRef.resetFields()
        },
        editCate(){
            this.$refs.editCateFormRef.validate(async valid=>{
                 const{data:res}=await this.$http.put(`categories/${this.editCateForm.cat_id}`,{cat_name:this.editCateForm.cat_name})
                 if(res.meta.status!=200){
                     return this.$message.error(res.meta.msg)
                 }
                 this.$message.success(res.meta.msg)
                 this.getGoodsCate()
                 this.editDialogVisible=false
             })
        },
        async removeCate(id){
            const result=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err)
            if(result=='confirm'){
                const{data:res}=await this.$http.delete(`categories/${id}`)
                if(res.meta.status==200){
                    this.$message({type: 'success',message: '删除成功!'})
                    this.getGoodsCate()
                }else{
                    return this.$message.error(res.meta.msg)
                }       
            }
        }
  }
}
</script>

<style scoped>
    .el-button{
        margin-bottom: 20px;
    }
    .el-cascader{
        width: 100%;
    }
</style>
